<template>

    <div class="innerContainer">
        <common-title>
            <template #expand>
                <el-button @click="handleEdit({type:1})">添加目录</el-button>

                <el-button type="primary" @click="openImport(1)">导入</el-button>
            </template>
        </common-title>

        <div class="innerPane">
            <div class="filterArea">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="菜单名称">
                        <el-input @keyup.enter="handleFilter" v-model="searchForm.menuTitle"
                            placeholder="请输入菜单名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button plain type="primary" @click="handleFilter">查询</el-button>
                        <el-button plain @click="handleClear">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="filterData" border row-key="id" style="width: 100%;  " row-class-name="fixed-row"
                default-expand-all :tree-props="{ children: 'sub', hasChildren: 'hasChildren' }"
                :cell-style="{ textAlign: 'center' }">

                <el-table-column type="index" width="50" label="序号" />
                <el-table-column header-align="center" prop="title" label="菜单标题" width="180" />
                <el-table-column header-align="center" prop="icon" label="图标" width="220" />
                <el-table-column header-align="center" prop="pcode" label="父菜单编码" width="120" />
                <el-table-column header-align="center" prop="code" label="菜单编码" width="120" />
                <el-table-column header-align="center" prop="path" label="菜单路径" />

                <el-table-column header-align="center" label="菜单类型" width="100">
                    <template #default="scope">
                        {{ scope.row.type === 1 ? '目录' : '菜单' }}
                    </template>
                </el-table-column>

                <el-table-column header-align="center" label="是否展开" width="100">
                    <template #default="scope">
                        <el-switch v-model="scope.row.active" :active-value="1" :inactive-value="0"
                            :before-change="() => toggleSwitch(scope.row, 'isPush')" />
                    </template>
                </el-table-column>


                <el-table-column label="操作" header-align="center" width="260" prop="col9">
                    <template #default="scope">
                        <el-link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-link>

                        <el-link type="danger" size="small" @click="onDel(scope.row)">删除</el-link> 

                        <el-link type="primary" size="small" @click="handleEdit({type:2,pcode:scope.row.code})">添加菜单</el-link>
                    </template>
                </el-table-column>


            </el-table>
        </div>

        <detail-view ref="viewObj" @confirm="handleSearch"></detail-view>
    </div>

</template>

<script setup>

import CommonTitle from "@/components/CommonTitle.vue";

import ImportDialog from "@/components/ImportDialog.vue";

import DetailView from "@/views/menu/view.vue";

import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

import { reqMenuList } from "@/utils/requests";


const router = useRouter();

// Dom 挂载之后
onMounted(() => {
    handleSearch();
});

// 用户数据
let tableData = ref([]);

let filterData = ref([]);

// 搜索条件
const searchForm = reactive({
    menuTitle: "",
});

const handleClear = () => {
    searchForm.menuTitle = "";
    handleFilter();
};

const handleFilter = () => {
    filterData.value = [...tableData.value];

    if (searchForm.menuTitle) {
        filterData.value = filterData.value.filter(item => item.title.includes(searchForm.menuTitle));
    }

};


const handleSearch = () => {
    reqMenuList().then((res) => {
        tableData.value = res;

        filterData.value = Array.isArray(res) ? [...res] : [];
    }).catch((err) => {
        ElMessage.error(err.message || "请求失败");
    });
};

const viewObj = ref();  
const handleEdit = (row) => {
    viewObj.value.openDialog(row);
};

</script>


<style scoped></style>